<template>
	<div class="container" ref="container">
		<div>
		<!-- 热门城市 -->
			<div class="hotcity">
				<h2>热门城市</h2>
				<ul class="hotcity-top">
					<li v-for="item of hotCity" :key="item.id" @click="change(item.name)">{{ item.name }}</li>
				</ul>
			</div>
			<!-- 字母排序 -->
			<div class="sort">
				<h2>字母排序</h2>
				<ul>
					<li v-for="(item,key) of cityList" @click="find(key)">{{ key }}</li>
				</ul>
			</div>
			<!-- 列表城市 -->
			<div>
				<div class="list" v-for="(value,key,index) of cityList" :ref="key">
					<h2>{{ key }}</h2>
					<ul>
						<li v-for="item of value" ref="city"@click="change(item.name)">{{ item.name }}</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import BScroll from 'better-scroll'
	import { mapMutations } from 'vuex'
	export default{
		props:["cityList","hotCity"],
		data(){
			return{
				scroll:""
			}
		},
		mounted(){
			let container = this.$refs.container;
			this.scroll = new BScroll(container)
		},
		methods:{
			find(key){
				console.log(key);
				this.scroll.scrollToElement(this.$refs[key][0],1000)
			},
			change(value){
				this.changeCity(value);
				this.$router.push("/")
			},
			...mapMutations(['changeCity'])
		}
	}
</script>
<style scoped lang="stylus">
	@import  '~@/assets/css/common.styl'
	.container {
	    position: absolute;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    top: 1.76rem;
	    overflow: hidden;
	    background-color: #f5f5f5;
	  }

	/*热门城市*/
	.hotcity h2{
		font-size:0.24rem;
		padding-top:0.1rem;
		margin:0.24rem 0.3rem;
		font-weight:normal;
		color:#212121;
	}
	.hotcity-top{
		background:#fff;
		position:relative;
		overflow:hidden;
	}
	.hotcity-top:before{
		content:"";
		height:100%;
		width:33.33%;
		left:33.33%;
		position:absolute;
		border-left: .02rem solid #ddd;
    	border-right: .02rem solid #ddd;
	}
	.hotcity-top li{
		width:33.33%;
		height: .9rem;
    	line-height: .9rem;
    	font-size: .28rem;
    	text-align: center;
    	border-bottom: .02rem solid #ddd;
    	margin-bottom: -1px;
    	float: left;
    	position: relative;
    	z-index: 10;
    	color: #212121;
	}
	/*字母排序*/
	.sort h2{
		font-size:0.24rem;
		margin:0.24rem 0.3rem;
		font-weight:normal;
		color:#212121;
	}
	.sort ul{
		position: relative;
    	overflow: hidden;
    	z-index: 0;
    	background-color: #fff;
    	padding: .3rem 0;
    	color: #212121;
    	font-size: .28em;
	}
	.sort ul li{
		width: 16.66%;
	    height: .9rem;
	    line-height: .9rem;
	    font-size: .28rem;
	    text-align: center;
	    float: left;
	    position: relative;
	    z-index: 10;
	    color: #212121;
	}
	/*城市列表*/
	.list h2{
		font-size:0.24rem;
		margin:0.24rem 0.3rem;
		font-weight:normal;
		color:#212121;
	}
	.list ul{
		position: relative;
    	overflow: hidden;
    	z-index: 0;
    	background-color: #fff;
	}
	.list ul:before{
		content: '';
	    position: absolute;
	    width: 25%;
	    left: 25%;
	    height: 100%;
	    border-left: .02rem solid #ddd;
	    border-right: .02rem solid #ddd;
	}
	.list ul:after{
		content: '';
	    position: absolute;
	    width: 10%;
	    left: 75%;
	    height: 100%;
	    border-left: .02rem solid #ddd;
	    border-right: 0;
	}
	.list ul li{
		width: 25%;
	    height: .9rem;
	    line-height: .9rem;
	    font-size: .28rem;
	    text-align: center;
	    border-bottom: .02rem solid #ddd;
	    margin-bottom: -1px;
	    float: left;
	    position: relative;
	    z-index: 10;
	    color: #212121;
	    $textOverflow();
	}
</style>